<template>
    <div class="teaching w-100 h-100">
        <el-card class="box-card-table h-100" shadow="never">
            <div slot="header" class="clearfix">
                <span class="fl">添加教学计划</span>
                <el-button class="fr" @click="goback" style="padding:6px;">返回</el-button>
            </div>
            <div class="h-100">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="计划名称：" prop="bPlanName">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="" label-width="0px" prop="year">
                                    <el-select v-model="ruleForm.year" placeholder="请选择教学年度">
                                        <el-option :label="item.label" :value="item.value" v-for="item in year" :key="item.value"></el-option>
                                    </el-select>&nbsp;
                                    <span>学年度</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="" label-width="0px" prop="team">
                                    <span>第</span>&nbsp;
                                    <el-input v-model="ruleForm.team" placeholder="学期" style="width:120px;"></el-input>
                                    &nbsp;
                                    <span>学期</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="" label-width="0px" prop="class">
                                    <el-input v-model="ruleForm.class" placeholder="科目" style="width:120px;"></el-input>
                                    &nbsp;
                                    <span>教学计划</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="学生：" prop="bSID">
                                <el-select v-model="ruleForm.bSID" placeholder="请选择学生">
                                    <el-option :label="item.SName" :value="item.SID" v-for="item in studyList" :key="item.SID"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="教师：" prop="bTID">
                                <el-select v-model="ruleForm.bTID" placeholder="请选择教师">
                                    <el-option :label="item.T_Name" :value="item.TID" v-for="item in teacherList" :key="item.TID"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    
                    <table class="w-100 plan-list">
                        <tr>
                            <th></th>
                            <th>教学要求</th>
                            <th>重点、难点</th>
                            <th style="width:50px;"></th>
                            <th class="week">周次</th>
                            <th style="width:220px;">课题（篇目）</th>
                        </tr>
                        <tr>
                            <td :rowspan="rowvalue">知识</td>
                            <td :rowspan="rowvalue">
                                <el-form-item label="" label-width="0px" prop="bJXYQ">
                                    <quill-editor v-model="ruleForm.bJXYQ"
                                        style="line-height:0px;"
                                        ref="myQuillEditor"
                                        :options="editorOption"
                                        >
                                    </quill-editor>
                                </el-form-item>
                            </td>
                            <td :rowspan="rowvalue">
                                <el-form-item label="" label-width="0px" prop="bZDND">
                                    <quill-editor v-model="ruleForm.bZDND"
                                        style="line-height:0px;"
                                        ref="myQuillEditor"
                                        :options="editorOption"
                                        >
                                    </quill-editor>
                                </el-form-item>
                            </td>
                            <td :rowspan="rowvalue">
                                <div>教<br>学<br>进<br>度</div>
                            </td>
                            <td class="no-border"></td>
                            <td class="no-border"></td>
                        </tr>
                        <tr v-for="(item,index) in week" :key="item.times">
                            <td  class="week">
                                <i v-if="index != 0 && index == week.length - 1" class="el-icon-close pointer" title="删除" @click="removePlan(index)"></i>
                                第{{index +1}}周
                            </td>
                            <td>
                                <el-input type="text" v-model.trim="item.plan" maxlength="30" show-word-limit></el-input>
                            </td>
                        </tr>
                        <tr :class="{'btn-tr' : rowvalue < 3 }">
                            <td class="week">
                                <el-button size="mini" type="primary" @click="addPlan">插入</el-button>
                            </td>
                            <td>
                                <el-input type="text" v-model.trim="ruleForm.new"></el-input>
                            </td>
                        </tr>
                    </table>
                    
                    <el-form-item class="t-r" style="margin-top:10px;">
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
import {addPlanList,editPlanList,lookPlanList} from '@/api/index.js'

export default {
    name: 'teaching',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        const y = +(new Date().getFullYear());
        let year = [];
        for (let i = 0; i < 3; i++) {
            if(i < 2) {
                let val = `${y - i - 1}-${y - i}`;
                year.unshift({label:val,value:val})
            } else {
                let val = `${y + i - 2}-${y + i + 1 - 2}`;
                year.push({label:val,value:val})
            }
        }
        return {
            year:year,
            editorOption:{
                modules:{
                    toolbar:[
                        ["bold", "italic", "underline", "strike"],
                        ["code-block",{list: "ordered"},{list: "bullet"}],
                        [{"color":[]},{"background":[]}],
                        [{indent: "-1"},{indent: "+1"}],
                        [{align: []}],
                        ["link", "image"]
                    ]
                },
                placeholder:'请输入'
            },
            ruleForm:{
                year:'',
                team:'',
                class:'',
                bJXYQ:'',
                bZDND:'',
                bSID:'',
                bTID:''
            },
            rules:{
                year:[
                    { required: true, message: '学年不能为空', trigger: 'change' }
                ],
                team:[
                    { required: true, message: '学期不能为空', trigger: 'blur' }
                ],
                class:[
                    { required: true, message: '科目不能为空', trigger: 'blur' }
                ],
                bJXYQ:[
                    { required: true, message: '教学要求不能为空', trigger: 'blur' }
                ],
                bZDND:[
                    { required: true, message: '重点难点不能为空', trigger: 'blur' }
                ],
                bSID:[
                    { required: true, message: '请选择学生', trigger: 'change' }
                ],
                bTID:[
                    { required: true, message: '请选择老师', trigger: 'change' }
                ],
            },
            week:[]
        }
    },
    computed:{
        rowvalue(){
            return this.week.length + 2
        },
        teacherList() {
            return this.$store.state.allTeacherList;
        },
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    created() {
        this.syudyid = this.$route.query.id;
        if(this.syudyid) {
            this._getStudyInfo();
        } else {
            for (let i = 0; i < 21; i++) {
                this.week.push({plan:'',week:i + 1,id:0})
            }
        }
    },
    methods:{
        _getStudyInfo(){
            lookPlanList({bTPID:this.syudyid}).then((res) => {
                if(res) {
                    let val = res.PlanName.split('@');
                    this.ruleForm.year = val[0];
                    this.ruleForm.team = val[1];
                    this.ruleForm.class = val[2];
                    this.ruleForm.bJXYQ = res.JXYQ;
                    this.ruleForm.bZDND = res.ZDND;
                    this.ruleForm.bSID = res.SID;
                    this.ruleForm.bTID = res.TID;
                    // 教学计划
                    let arr = res.bTS_Tisme.split('|');
                    for (let i = 0; i < arr.length; i++) {
                        const item = arr[i].split('#@');
                        this.week.push({plan:item[1],week:item[2],id:item[0]})
                    }
                }
            })
        },
        submitForm(){
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params ={
                        bPlanName:`${this.ruleForm.year}@${this.ruleForm.team}@${this.ruleForm.class}`,
                        bJXYQ:this.ruleForm.bJXYQ,
                        bZDND:this.ruleForm.bZDND,
                        bSID:this.ruleForm.bSID,
                        bTID:this.ruleForm.bTID,
                        bTS_Tisme:this.week.map(item => item.id +'#@'+item.plan +'#@'+ item.week).join('|'),
                    }
                    if(this.syudyid) {
                        editPlanList({...params,bTPID:this.syudyid}).then((res) => {
                            if(res) {
                                if(res.code == 200) {
                                    this.$util.tipsMsg('success','修改成功！');
                                    this.goback()
                                } else {
                                    this.$util.tipsMsg('error',res.message);
                                }
                            }
                        }).catch((err) => {

                        })
                    } else {
                        addPlanList(params).then((res) => {
                            if(res) {
                                if(res.code == 200) {
                                    this.$util.tipsMsg('success','添加成功！');
                                    this.goback()
                                } else {
                                    this.$util.tipsMsg('error',res.message);
                                }
                            }
                        }).catch((err) => {

                        })
                    }
                } else {
                    return false;
                }
            })
        },
        onReset(){
            this.$refs.searchform.resetFields()
        },
        addPlan(){
            this.week.push({times:this.week.length + 1,value:this.ruleForm.new})
            this.ruleForm.new = "";
        },
        removePlan(index){
            this.$util.openTips.call(this,'是否确定删除？')
            .then((res) => {
                this.week.splice(index,1);
            }).catch((err) => {
                console.log(err)
            })
            
        },
        handleSelectionChange(row){
            console.log(row)
            this.tableSelection = row;
        },
        // 编辑
        handleClickedit(row){
            this.$refs.addstudy.dialogVisible = true;
        },
        // 删除
        handleClicklook(row){
            console.log(row)
            this.$router.push({path:'/studyDetails',query:{id:row.id}})
        },
        // 全选
        goback(){
            this.$router.push({path:'/teaching/teaching-list'})
        },
        // 全反选
        handleClickSelectOther(){
            this.tableData.forEach(row => {
                this.$refs.table.toggleRowSelection(row);
            });
        },
        // 添加学生
        addStudyInfo(){
            this.$refs.addstudy.dialogVisible = true;
        }
    }
}
</script>
<style lang="less">
.plan-list{
    th{
        background-color: #F5F7FA;
        line-height: 40px;
    }
    th,td{
        border:1px solid #ccc;
    }
    td .el-form-item{
        margin-bottom: 0px;
    }
    .week{
        width: 100px;
        .el-icon-close:hover{
            color:red;
        }
    }
    .no-border{
        border-bottom: 0px;
    }
    .btn-tr{
        td{
            border-top:0px;
        }
    }
    .ql-editor{
        min-height: 400px !important;
    }
}
.teaching{
    .el-card__body{
        // height:calc(100% - 70px);
    }
    .box-card-table{
        overflow-y: auto;
        box-sizing: border-box;
    }
}
</style>
